<template>
  <div class="app-container main" v-loading="loading">
    <div class="title">
      <h3>{{ formData.title }}</h3>
      <span>{{ formData.createTime }}</span>
    </div>
    <el-divider />
    <div class="content" v-html="formData.content"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";
import MessageAPI, { type MessageVO } from "@/api/center/message";
import { cloneDeep } from "lodash-es";
/**
 * 消息详情页面
 */
defineOptions({
  name: "UserMessageDetails",
});

/** 表单初始化 */
const DEFAULT_FORM_DATA: MessageVO = {
  id: undefined,
  /** 消息标题 */
  title: undefined,
  /** 消息内容 */
  content: undefined,
};
/** 表单对象 */
const formData = ref<MessageVO>(cloneDeep(DEFAULT_FORM_DATA));
const loading = ref<boolean>(false);
const route = useRoute();

watch(
  () => route.query.id,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
    if (newValue) {
      getBaseMessage();
    }
  }
);

const getBaseMessage = () => {
  loading.value = true;
  MessageAPI.getBaseMessageApi(parseInt(route.query.id! as string))
    .then((res) => {
      const { data } = res;
      formData.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
};
/** 页面渲染完成后初始化 */
onBeforeMount(async () => {
  if (route.query.id) {
    getBaseMessage();
  }
});
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  // height: 100vh;

  .title {
    width: 100%;
    text-align: center;
  }
  .content {
    width: 100% !important;
    height: 100% !important;
    min-height: 72vh;
  }
}
</style>
